<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>所在位置</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link href="../../css/life_housekeeper/snapshot_index.css" rel="stylesheet" />
		<script src="../../js/statistics.js"></script>
		<style>
			.mui-search.mui-active input[type=search] {
				width: 83%;
			}
			.mui-search.mui-active .mui-search-btn{
				display:inline-block;
				float: none;
			}
			.mui-search .mui-search-btn{
				display: none;
				padding: 0;
				height: 28px;
			}
			.mui-input-row.mui-search .mui-icon-clear{
				top: 10px;
				right: 21%;
				width: 20px;
				height: 20px;
			}
		</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav header">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">所在位置</h1>
	</header>
	
	<div class="mui-content">
		<div class="mui-input-row mui-search">
		    <input type="search" class="mui-input-clear" placeholder="搜索附近位置">
		    <button class="mui-btn mui-btn-primary mui-search-btn" id="searchBtn">搜索</button>
		</div>
		<div class="list">
		</div>
		<div id="container"></div>
	</div>
</body>
<script src="../../plugins/jquery/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../plugins/mui/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../plugins/template/template.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.1&key=bf3c5a5403b1dfca986d37fd8051fc65" type="text/javascript"></script>
<script type="text/html" id="searchTpl">
	{{if pois.length}}
    {{each pois as item i}}
    <li data-district="{{item.cityname}}{{item.adname}}">
    	<span>{{item.name}}</span>
    	<p>{{item.cityname}}{{item.adname}}{{item.address}}</p>
    </li>
    {{/each}}
    {{/if}}
</script>
<script type="text/javascript">
	mui.init();
	mui.plusReady(function(){
		var detailPage,detailPage1 = null;
		var map = new AMap.Map("container");
		var _self = plus.webview.currentWebview(),
		 	ads = _self.street,
		 	district = _self.district;
		 	//console.log(district);
		if(ads){	
		    AMap.service(["AMap.PlaceSearch"], function() {
		        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
		            pageSize: 30,
		            type: '汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施',
		            pageIndex: 1,
		            city: "010", //城市
		            map: map
		        });
		      placeSearch.search(district+ads,function(status,result){
		      		//console.log(status);
		        	//console.log(JSON.stringify(result));
		        	if (status === 'complete' && result.info === 'OK') {
		        		var list = result.poiList,
		        		searchHtml = template('searchTpl',list);
		        		document.querySelectorAll('.list')[0].innerHTML = searchHtml;
		        		
				    }
		      });
		    });
		}
		document.getElementById("searchBtn").addEventListener('tap',function(e){
			console.log(district);
			var value = document.querySelectorAll('.mui-search input')[0].value;
			if(value){
				AMap.service(["AMap.PlaceSearch"], function() {
			        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
			            pageSize: 30,
			            type: '汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施',
			            pageIndex: 1,
			            city: "010", //城市
			            map: map
			        });
			      placeSearch.search(district+value,function(status,result){
			      		//console.log(status);
			        	console.log(JSON.stringify(result));
			        	if (status === 'complete' && result.info === 'OK') {
			        		var list = result.poiList,
			        		searchHtml = template('searchTpl',list);
			        		document.querySelectorAll('.list')[0].innerHTML = searchHtml;
			        		
					    }
			      });
			    });
			}
		},false);
		mui('.list').on('tap','li',function(){
			var _this = this,
				district = _this.getAttribute('data-district'),
			 	nodes = _this.childNodes,
			address = district + nodes[1].innerText.trim();
			if(!detailPage){
			    detailPage = plus.webview.getWebviewById('release');
			}
			if(!detailPage1){
			    detailPage1 = plus.webview.getWebviewById('feedback');    
			}
			//触发详情页面的newAddress事件
			mui.fire(detailPage,'newAddress',{
			    address:address,
			    district:district
			});
			mui.fire(detailPage1,'newAddress',{
			    address:address,
			    district:district
			});
			mui.back();
		})
	})
</script>
</html>
